<template>
  <div class="appTemplate">
    <Header :title="'进阶案例-创建VR内容'" :back="true"/>
    <main ref="threeView" class="main"></main>
    <div class="buttonGroup">
      <button @click="animateClick">{{ animateActive?'停止动画':'启动动画' }}</button>
    </div>
    <Footer />
  </div>
</template>

<script setup lang="ts">
import Header from '@/components/Header.vue';
import Footer from '@/components/Footer.vue';
import {onMounted, ref} from "vue";
// 导入整个 three.js核心库
import * as THREE from 'three';
import Stats from '&t/examples/jsm/libs/stats.module';
import { VRButton } from '&t/examples/jsm/webxr/VRButton';
// 导入判断WebGL工具
import WebGL from "@/utils/WebGL";
import { ThreeUtil } from "@/utils/ThreeUtil";
import { Texture } from "three";

THREE.Cache.enabled = true;
// 定义three场景显示区域
const threeView = ref();
const animateActive = ref(true);
let threeUtil: ThreeUtil;

const animateClick = () => {
  if (animateActive.value) {
    threeUtil.renderer.setAnimationLoop(() => {});
  } else {
    animate();
  }
  animateActive.value = !animateActive.value;
}

onMounted(() => {
  if (WebGL.isWebGLAvailable()) {
    initThree();
    animate();
  } else {
    const warning = WebGL.getWebGLErrorMessage();
    threeView.value.appendChild(warning);
  }
})

const initThree = () => {
  threeUtil = new ThreeUtil();
  threeUtil.items['clock'] = new THREE.Clock();
  // 配置相关
  threeUtil.scene.background = new THREE.Color( 0x101010 );
  const light = new THREE.AmbientLight( 0xffffff, 1 );
  threeUtil.scene.add( light );
  threeUtil.camera.fov = 70;
  threeUtil.camera.near = 1;
  threeUtil.camera.far = 1000;
  threeUtil.scene.add( threeUtil.camera );
  createImage();
  threeUtil.renderer.setPixelRatio( window.devicePixelRatio );
  console.log(threeView.value.offsetWidth)
  threeUtil.renderer.setSize( threeView.value.offsetWidth, threeView.value.offsetWidth, true );
  threeUtil.renderer.xr.enabled = true;
  threeUtil.renderer.xr.setReferenceSpaceType( 'local' );
  threeView.value.appendChild( threeUtil.renderer.domElement );
  threeView.value.appendChild( VRButton.createButton( threeUtil.renderer ) );
  threeView.value.style.touchAction = "none";
  const stats = new Stats();
  stats.dom.style.position = "absolute";
  threeUtil.items['stats'] = stats;
  threeView.value.appendChild( stats.dom );
}

const createImage = () => {
  const panoSphereGeo = new THREE.SphereGeometry( 6, 256, 256 );
  const panoSphereMat = new THREE.MeshStandardMaterial( {
    side: THREE.BackSide,
    displacementScale: - 4.0
  } );
  threeUtil.items['sphere'] = new THREE.Mesh( panoSphereGeo, panoSphereMat );
  const manager = new THREE.LoadingManager();
  const loader = new THREE.TextureLoader( manager );
  loader.load( '/src/assets/textures/kandao3.jpg', ( texture: Texture ) => {
    texture.colorSpace = THREE.SRGBColorSpace;
    texture.minFilter = THREE.NearestFilter;
    texture.generateMipmaps = false;
    threeUtil.items['sphere'].material.map = texture;
  });
  loader.load( '/src/assets/textures/kandao3_depthmap.jpg', ( depth: Texture ) => {
    depth.minFilter = THREE.NearestFilter;
    depth.generateMipmaps = false;
    threeUtil.items['sphere'].material.displacementMap = depth;
  });
  manager.onLoad = () => {
    threeUtil.scene.add( threeUtil.items['sphere'] );
  };
}

// 渲染
const randerer = () => {
  if ( !threeUtil.renderer.xr.isPresenting ) {
    const time = threeUtil.items['clock'].getElapsedTime();
    threeUtil.items['sphere'].rotation.y += 0.001;
    threeUtil.items['sphere'].position.x = Math.sin( time ) * 0.2;
    threeUtil.items['sphere'].position.z = Math.cos( time ) * 0.2;
  }
  threeUtil.renderer.render( threeUtil.scene, threeUtil.camera );
}

const animate = () => {
  threeUtil.renderer.setAnimationLoop(() => {
    randerer();
    threeUtil.items['stats'].update();
  })
}
</script>

<style scoped>

</style>